<template>
	<div>
		<div class="title">
			<h2>这里是头部组件</h2>
			<!--<slot></slot> --> <!-- //匿名组件-->
			<slot name="mainTitle" :upperTxt="upperTxt"></slot>  
			<slot name="subTitle"></slot> <!-- name属性用来区分不同的插槽-->
		</div>
		
	</div>
</template>

<script>
	export default{
		props:["testTxt"],
		data(){
			return {
				title:"哈哈哈"
			}
		},
		computed:{
			upperTxt(){
				return this.testTxt.toUpperCase();
			}
		}
	}
</script>

<style lang="less" scoped>
.title{
	h2{
		color:#f00;
	}
}
	
</style>